<template>
    <l-data-panel
        isApp
        isMore
        :label="data.title"
        >
        <div class= "l-rblock l-min-databoard " >
            <div class="l-min-databoard__item" >
                <div class="num" ><l-count-up :end="nCompletedNum" ></l-count-up></div>
                <div class="label" >{{ $t('待办任务') }}</div>
            </div>
            <div class="l-min-databoard__item" >
                <div class="num" ><l-count-up :end="delegateNum" ></l-count-up></div>
                <div class="label" >{{ $t('委托任务') }}</div>
            </div>
            <div class="l-min-databoard__item" >
                <div class="num" ><l-count-up :end="completedNum" ></l-count-up></div>
                <div class="label" >{{ $t('已办任务') }}</div>
            </div>
        </div>
    </l-data-panel>
</template>
<script>
const api = window.$api.workflow.process
export default {
    props: ['data','isPreview'],
    data () {
        return {
            nCompletedNum:0,
            completedNum:0,
            delegateNum:0
        }
    },
    mounted(){
        this.loadData()
    },
    methods:{
        async loadData(){
            const queryData = {
                rows:1,
                page:1,
                sidx:'F_CreateDate DESC'
            }
            // 加载代办任务
            const unCompletedData = await this.$awaitWraper(api.getUnCompletedMyPage(queryData,{}))
            // 加载已办任务
            const completedData = await this.$awaitWraper(api.getCompletedMyPage(queryData,{}))
            // 加载委托任务
            const delegateData = await this.$awaitWraper(api.getDelegateMyPage(queryData))

            this.nCompletedNum = unCompletedData.records
            this.completedNum = completedData.records
            this.delegateNum = delegateData.records

        }
    }
}
</script>
<style lang="scss" scoped>
.l-min-databoard{
    display: flex;
    &__item{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 8px;
        justify-content: center;
        min-width: 33.33%;
        box-sizing: border-box;

        .num{
            color: #000;
            font-size:16px;
            margin-bottom: 8px;
        }
        .label{
            font-size: 12px;
        }

    }
}
</style>

